<template>
    <div style="padding: 12px;">
        <!-- produc info -->
        <div style="display: flex;padding: 12px;">
            <el-image :src="info.productImg" fit="fill" :lazy="true" style="width: 130px;height: 130px;"></el-image>
            <div style="margin-left: 12px;display: flex;flex-direction: column;justify-content: space-around;">
                <div style="font-size: 18px;font-weight: bold;">{{info.projectName}}</div>
                <div style="font-size: 14px;color: #666666;">发布用户:{{info.orderUserName}}</div>
                <div style="font-size: 14px;color: #666666;">发布时间:{{info.publishTime}}</div>
                <div style="font-size: 14px;color: #666666;">定位地址:{{info.projectAddress}}</div>
            </div>
        </div>
        <!-- action view -->
        <div style="display:flex;padding:12px;">
            <el-input placeholder="快速报价¥: 800.00元" size="mini" clearable v-model="priceTotal"
            style="width:300px;margin-right: 12px;"
            ></el-input>
            <el-button type="primary" size="mini" @click="submitHandle">确认报价</el-button>
        </div>

        <el-button type="primary" size="mini" @click="addItemHandle" style="margin: 12px;">添加明细</el-button>

        <!-- item -->
        <div style="display: flex;align-items: center;"
        v-for="(item,idx) in itemList" :key="idx"
        >
            <el-form  ref="form"  label-width="80px" :inline="false" size="mini" style="flex: 1;">
                <el-form-item label="项目名称" size="mini">
                    <el-input v-model="item.name" placeholder="请填写项目名称" size="mini" clearable @change=""></el-input>
                </el-form-item>
            
                <el-form-item label="备注" size="mini">
                    <el-input v-model="item.remark" placeholder="请填写备注" size="mini" clearable @change=""></el-input>
                </el-form-item>
                
                <el-form-item label="数量" size="mini">
                    <el-input v-model="item.number" placeholder="请填写数量" size="mini" clearable @change=""></el-input>
                </el-form-item>
                
                <el-form-item label="价格" size="mini">
                    <el-input v-model="item.totalPrice" placeholder="请填写价格" size="mini" clearable @change=""></el-input>
                </el-form-item>
            </el-form>
            <el-button type="danger" size="normal" @click="itemList.splice(idx,1)" style="margin: 12px;" icon="el-icon-delete"></el-button>
        </div>
    </div>
  </template>
  
  <script>
    import Api from "./api"
  export default ({
    name: 'TakePrice',
    data() {
      return {
        /// 项目信息
        info:{
            productImg:'',
            projectName:"",
            owerName:"",
            publishTime:"",
            projectAddress:"",
        },
        priceTotal:"",
        itemList:[
        ]

      }
    },
    mounted(){
        this.info = this.$route.params;
    },

    methods:{
        addItemHandle(){
            this.itemList.push({
                "name": "",
                "number": "",
                "price": "",
                "remark": "",
                "totalPrice": ""
            })
        },
        async submitHandle() {
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            let body = {
                itemList:this.itemList,
                priceTotal:this.priceTotal,
                ...this.info,
                userId:userInfo.id,
                masterName:userInfo.username,
                masterHone:userInfo.mobile,
                masterRolename:'设计师',
                orderId:this.info.id,
            }
            let res = await Api.netYzOrderPriceSave(body);
            let {status,msg} = res.data
            if(status == 200) {
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    showClose: true,
                    duration: 3000,
                });
                setTimeout(() => {                    
                    /// 关闭当前页面 然后切换到选择产品
                    this.$store.dispatch("tagsView/delView", this.$route);
                    this.$router.replace({name:"order_house"});
                }, 3000);
            } else {
                this.$message({
                    message: msg,
                    type: 'error',
                    showClose: true,
                    duration: 3000,
                });
            }
        }
    }
  })
  
  </script>
  